<style scoped >
.main{
  display: flex;
  flex-direction: row;
  width:100%;
}
.main_left{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
  height: 50%;
}
.main_left img{
  width: 600px;
  height: 500px;
}
.main_right{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-left:30px;
  text-align:left;
  margin:30px 0px;
}
.top{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align:center;
  font-size: 20px;
}
.grid-content {
  border-radius: 4px;
  min-height: 25px;
  display: flex;
  align-items: center;
}
.dark-content {
  border-radius: 4px;
  min-height: 100px;
  line-height:40px;
  padding-left: 20px;
}
.bg-red {
  background:#FF3333;
}
.bg-purple-dark {
  background: #d3dce6;
}
.btn_group{
  margin-top: 10px;
  display: flex;
}
</style>

<template>
  <div>
    <v-nav-top/>
    <div class="top">{{items.itemid}} </div>
    <div class="main">
        <div  class="main_left">
            <img :src="items.attr5" alt="" >
        </div>
      <div div el-container  class="main_right">
      <div el-main>
       <div>
         <h1 style="font-size:40px">{{items.itemid}}</h1>
         <h3 style="color:grey">category:{{items.name}}</h3>
         <p style="color:red">{{items.attr2}}</p>
       </div>
        <el-row>
          <el-col :span="20"><div class="grid-content bg-red">
            <el-icon name="alarm-clock"></el-icon>
            BIG SALE</div></el-col>
          <el-col :span="20"><div class="dark-content bg-purple-dark">
           <div> lastprice:{{items.listprice}}</div>
           <div> unitcost:{{items.unitcost}}</div>
          </div></el-col>
        </el-row>
        <el-row class="btn_group">
          <v-buy-pop :item="items" :fromItem="true"/>
          <v-cart-pop :itemid="items.itemid"/>
        </el-row>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import nav from "@/components/nav";
import buyGoods from '@/components/cart/buyGoods.vue'
import addTocart from '@/components/cart/addCart.vue'

export default {
  name: "item",
  components: {
    'v-nav-top': nav,
    'v-buy-pop': buyGoods,
    'v-cart-pop': addTocart
  },
  data() {
    return{
      items: {},   
    }
  },
  mounted(){
    let itemid = this.$route.params.itemid
    this.getItems(itemid);
  },
  methods: {
    // 请求item信息
    getItems(itemid){
      this.$Axios({
        method: 'get',
        url: '/catalog/item/'+itemid   //url不清楚,获取商品具体信息
      }).then(res => {
        this.items = res.data.data;
      }).catch(error => {
        this.$message.error("其他服务器错误"+error);
      })
    },
  }
}
</script>

